前端nginx如何配置ws(websocket)代理服务？

2024-05-30 14:35| 来源: 网络整理| 查看: 265

最近有个需求是WebSocket代理配置，ws配置跟http配置不太一样，所以记录一下需要配置的nginx和使用方法。

发起websocket请求的路径

// 原本写死的路径是 const url = `ws://ip:port/umc/ws/connect/...` // 后面就是具体的请求地址，根据实际情况填写 // 写成动态的路径 const url = `ws://${window.location.host}/wsPrefix/umc/ws/connect/...` // 注意：/wsPrefix是拦截代理的标志，根据自己项目的拦截代理进行替换即可。在前端是用于标识ws请求，在设置代理的过程中主要用于请求拦截标识，实际请求会截掉它。

这里的拦截标识是必要的，没有拦截标识，前端就不会去请求正确的地址。

后台实际访问的地址是 ws://ip:port/umc/ws/connect/...

所以在代理和nginx配置的时候都要把拦截标识截掉，发出正确的请求给后台才能连通。

React项目内配置ws代理设置

在proxy.ts文件中添加如下代理配置：

export default { dev: { '/wsPrefix/umc/ws': { target: 'http://ip:port/', //这里是后台ws访问地址 changeOrigin: true, //允许跨域设置 ws: true, //websocket代理设置 pathRewrite: { '^/wsPrefix' : '/' } //拦截路径去除 } } } 在项目中配置nginx方法

一般容器部署的nginx是在项目中会创建一个docker文件存放nginx配置，所以找到nignx文件夹进行配置即可。但是有些虚机部署的是在机器上配置nginx，也就是Linux服务，文件位置在/usr/local/nginx/conf/文件夹中，具体位置不同系统镜像文件位置可能略有差异，可以通过命令去查找nginx文件夹的位置放在哪（ps -afx | grep nginx）。

upstream websocketServer { server ip:port } # 如果没有Upgrade头，则$connection_upgrade为close，否则为upgrade map $http_upgrade $connection_upgrade { default upgrade; '' close; } server { listen 80; ...; # webSocket代理 location ^~ /wsPrefix/umc/ws/ { proxy_pass http://websocketServer/umc/ws/; #这里是http不是ws，代理的ip和port写ws访问的实际地址 proxy_http_version 1.1; #这里必须使用http 1.1 #下面两个必须设置，请求头设置为ws请求方式 proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } }

编写完成配置文件保存后，需要重启nginx服务，重启后使用上述前端访问地址发起ws请求即可成功连接到代理服务。

【本文地址】

公司简介

联系我们